<template>
    <div class="screen_container">
       <div class="banner" :class="{banner_dark_theme:isDarkTheme,banner_light_theme:!isDarkTheme }">
            <div class="top"
            :class="{ top_dark_theme: isDarkTheme, top_light_theme: !isDarkTheme }"
            >电商平台实时监控系统
                <span class="theme_button" @click="themeStore.changeTheme"><img 
                :src="isDarkTheme ?'/static/img/qiehuan_dark.png': '/static/img/qiehuan_light.png'" 
                alt=""    
                ></span>
            </div>
            <div class="grid_container">
                <div class="trend grid_item" :class="{zoom:resize.trend.ifZoom }">
                    <Trend ref="trend_ref"></Trend>
                </div>
                <div class="map grid_item" :class="{ zoom: resize.map.ifZoom }">
                    <Map ref="map_ref"></Map>
                </div>
                <div class="stock grid_item" :class="{ zoom: resize.stock.ifZoom }">
                    <Stock ref="stock_ref"></Stock>
                </div>
                <div class="seller grid_item" :class="{ zoom: resize.seller.ifZoom }">
                    <Seller ref="seller_ref"></Seller>
                </div>
                <div class="rank grid_item" :class="{ zoom: resize.rank.ifZoom }">
                    <Rank ref="rank_ref"></Rank>
                </div>
                <div class="hot grid_item" :class="{ zoom: resize.hot.ifZoom }">
                    <Hot ref="hot_ref"></Hot>
                </div>
               
            </div>
       </div> 
    </div>
</template>

<script setup>
import Seller from '@/components/Seller.vue';
import Trend from '@/components/Trend.vue';
import Rank from '@/components/Rank.vue';
import Hot from '@/components/Hot.vue';
import Stock from '@/components/Stock.vue';
import Map from '@/components/Map.vue';
import { ref,provide,reactive,watch,nextTick,computed } from 'vue';
import { useThemeStore } from '@/stores';
const themeStore=useThemeStore()

const seller_ref = ref(null)
const trend_ref = ref(null)
const hot_ref = ref(null)
const map_ref = ref(null)
const stock_ref = ref(null)
const rank_ref = ref(null)
const resize = reactive({
    seller: {
        ifZoom: false,
        get com() {
            return seller_ref.value
        }
    },
    trend: {
        ifZoom: false,
        get com() {
            return trend_ref.value
        }
    },
    hot: {
        ifZoom: false,
        get com() {
            return hot_ref.value
        }
    },
    map: {
        ifZoom: false,
        get com() {
            return map_ref.value
        }
    },
    stock: {
        ifZoom: false,
        get com() {
            return stock_ref.value
        }
    },
    rank: {
        ifZoom: false,
        get com() {
            return rank_ref.value
        }
    }
})
const handleReSize=(type,option)=>{
    resize[type]['ifZoom']=option
    nextTick(()=>{
       resize[type].com.screenAdaptor()
    })
    
}

const isDarkTheme=computed(()=>{
    return themeStore.currentTheme==='chalk'
})

provide('handleReSize', handleReSize)



</script>

<style scoped>
.screen_container{
    width: 100%;
    height: 100%;
    overflow: hidden;

}
.banner{
    width: 100%;
    height: 100%;
    margin: 0 auto;
   
}
.banner .top{
    position: relative;
    height: 100px;
    width: 100%;
    
    background-repeat: no-repeat;
    background-position: center;
    background-size:100% 100px ;
    text-align: center;
    line-height: 100px;
    font-size: 35px;
    
}

.grid_container{
    
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(7,12.5%);
    grid-template-rows: repeat(8,10%);
    justify-content: center;
    gap:20px;
    padding-top: 10px;
}

.grid_container .grid_item:nth-child(1){
    grid-row: 1/5;
    grid-column: 1/3;
    /* position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    top: 0; */
    
    
}
.grid_container .grid_item:nth-child(2){
    grid-row: 1/5;
    grid-column: 3/6;
    
   
}
.grid_container .grid_item:nth-child(3){
    grid-row: 1/4;
    grid-column: 6/8;
   
    
}
.grid_container .grid_item:nth-child(4){
    grid-row: 5/8;
    grid-column: 1/3;
   /* position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    top: 0; */
    
}
.grid_container .grid_item:nth-child(5){
    grid-row: 5/8;
    grid-column: 3/6;
  
    
}
.grid_container .grid_item:nth-child(6){
    grid-row: 4/8;
    grid-column: 6/8;
   
}
.zoom{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    top: 0;
}

.theme_button{
    position: absolute;
    right: 2%;
    top: -10%;
    cursor: pointer;
}


.banner_dark_theme{
    background-color: #121417;
}
.banner_light_theme{
    background-color: #edeef0;
}

.top_dark_theme{
    background-image: url('/static/img/header_border_dark.png');
    color: white;
}
.top_light_theme{
    background-image: url('/static/img/header_border_light.png');
    color: rgb(61, 60, 60);
}
</style>